<script setup>
import { onMounted, ref } from 'vue'

const formLabelAlign = ref({
  ip: '',
  port: ''
})

function getWSserverconfig(){
  window.electron.ipcRenderer.send('get_wsserver_config', 'pls send data')
  window.electron.ipcRenderer.on('send_ws_config', (_, data) => {
    console.log('data from main process', data)
    formLabelAlign.value.ip = data.ws_server_ip
    formLabelAlign.value.port = data.ws_server_port
  })
}
function setWSserverconfig(){
  window.electron.ipcRenderer.send('set_wsserver_config', JSON.stringify({
    'ws_server_ip': formLabelAlign.value.ip,
    'ws_server_port': formLabelAlign.value.port
  }))
}
onMounted(() => {
  getWSserverconfig()
})
</script>
<template>
  <div id="settings_container">
    <el-form id="settings_form" label-position="" label-width="auto" :model="formLabelAlign">
      <el-form-item label="Websocket服务器ip" label-position="right">
        <el-input v-model="formLabelAlign.ip" />
      </el-form-item>
      <el-form-item label="Websocket服务器端口" label-position="right">
        <el-input v-model="formLabelAlign.port" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setWSserverconfig">提交</el-button>
        <el-button type="warning" @click="getWSserverconfig">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
#settings_container {
  width: 100vw;
  height: 100vh;
  background-color: #1b1b1f;
  #settings_form {
    width: 60rem;
    height: fit-content;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    :deep(.el-form-item__label) {
      color: #ffffff;
    }
  }
}
</style>
